import React, { Component } from 'react';
import { StyleSheet, View} from 'react-native'
import { Button } from 'iftide'

export default class Basic extends Component{
    constructor(props) {
        super(props);
    }

    onPress(value){
        console.log(value);
    }

    render() {
        return (
            <View>
                <View style={styles.container_two}>
                    <Button title={"测试s"} size={"S"} type={"primary"} />
                    <Button title={"测试s"} size={"S"} type={"secondary"} hasMargin={true} />
                    <Button title={"测试s"} size={"S"} type={"link"} hasMargin={true} />
                    <Button title={"测试s"} size={"S"} type={"textlink"} hasMargin={true} />
                </View>
                <View style={styles.container_two}>
                    <Button title={"smallest"} size={"smallest"} />
                    <Button title={"smallest"} size={"smallest"} type={"secondary"} hasMargin={true} />
                    <Button title={"smallest"} size={"smallest"} type={"link"} hasMargin={true} />
                    <Button title={"smallest"} size={"smallest"} type={"textlink"} hasMargin={true} />
                </View>
                <View style={styles.container_one}>
                    <Button title={"主要按钮"} size={"normal"} type={"primary"} onPress={this.onPress} hasIcon={true} source={require('../image/Loading.png')} />
                </View>
                <View style={styles.container_two}>
                    <Button title={"S"} size={"S"} type={"link"} onPress={this.onPress}/>
                    <Button title={"L"} size={"L"} hasMargin={true} type={"textlink"}/>
                    {/* <Button title={"主要按钮"} size={"small"} hasMargin={true} type={"link"}/> */}
                </View>
                <View style={styles.container_one}> 
                    <Button title={"主要按钮 - 禁用"} size={"normal"} disabled={true}/>
                </View>
                <View style={styles.container_one}>
                    <Button title={"次要按钮"} size={"normal"} type={"secondary"} hasIcon={true} source={require('../image/Loading_1.png')}/>
                </View>
                <View style={styles.container_one}>
                    <Button title={"次要按钮 - 禁用"} size={"normal"} type={"secondary"} disabled={true}/>
                </View>
                <View style={styles.container_two}>
                    <Button title={"次要按钮"} size={"middle"} type={"secondary"} onPress={this.onPress}/>
                    <Button title={"主要按钮"} size={"middle"} hasMargin={true} hasIcon={true} source={require('../image/Loading.png')} onPress={this.onPress}/>
                </View>
                <View style={styles.container_two}>
                    <Button title={"次要按钮 - 禁用"} size={"middle"} type={"secondary"} disabled={true}/>
                    <Button title={"主要按钮 - 禁用"} size={"middle"} hasMargin={true} disabled={true}/>
                </View>
                <View style={styles.container_three}>
                    <Button title={"次要按钮"} size={"small"} type={"secondary"}/>
                    <Button title={"主要按钮"} size={"small"} hasMargin={true}/>
                    <Button title={"主要按钮"} size={"small"} hasMargin={true}/>
                </View>
                <View style={styles.container_three}>
                    <Button title={"次要按钮"} size={"small"} type={"secondary"} disabled={true}/>
                    <Button title={"次要按钮"} size={"small"} hasMargin={true} disabled={true}/>
                    <Button title={"主要按钮"} size={"small"} hasMargin={true} disabled={true}/>
                </View>
                <View style={styles.container_smallest}>
                    <Button title={"link"} size={"M"} type={"link"} onPress={this.onPress} isRadius={true}/>
                    <Button title={"smallest次"} size={"smallest"} type={"secondary"} hasMargin={true}/>
                    <Button title={"按钮"} size={"smallest"} hasMargin={true} disabled={true}/>
                    <Button title={"s"} size={"S"} isRadius={true}  type={"link"} disabled={true}/>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container_one:{
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        marginVertical: 4,
    },
    container_two: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        marginVertical: 4,
    },
    container_three: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        marginVertical: 4,
    },
    container_smallest:{
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 3,
        marginVertical: 4,
    },
});
